<template>
  <div class="flex">
    <n-button-group
      size="small"
      v-for="item in finaOption"
      :key="item.group"
      class="mr-2"
    >
      <template v-for="btn in item.btns" :key="btn.key">
        <n-button
          type="tertiary"
          @click="handleBtnClick(btn.key)"
          class="text-[13px]"
          v-if="btn.type === 'btn'"
        >
          <SvgIcon
            :icon="btn.myIcon"
            size="16px"
            class="mr-1"
            color="#13b1fe"
          ></SvgIcon>
          {{ btn.label }}
        </n-button>

        <n-dropdown
          v-if="btn.type === 'drop-btn'"
          trigger="click"
          :options="btn.options"
          :render-label="renderLabel"
          @select="handleBtnClick"
        >
          <n-button type="tertiary">
            <SvgIcon icon="xiala1" size="13px"></SvgIcon>
          </n-button>
        </n-dropdown>
      </template>
    </n-button-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useUserStore from '@/stores/modules/user'
import useExplorerStore from '@/stores/modules/explorer'
import type { IndexObj } from '@/types/commom'
import { PERMISSIONS } from '@/constants/permission'
import { navTypeList } from '@/constants/explorer'
import { renderDropLabel } from '@/utils/commonBusiness'
import { newFileActions, uploadActions } from '../constants/dropDown'

const renderLabel = (option: IndexObj) => {
  return renderDropLabel(option.myIcon, option.label, '#888', '15px', '#13b1fe')
}

const props = defineProps<{
  sourceAuths: string[]
  checkRowLength: number
  curNav?: any
}>()

const emits = defineEmits<{
  (e: 'key-select', key: string, option: any): void
}>()

const userStore = useUserStore()
const explorerStore = useExplorerStore()

interface OptionType {
  label: string
  myIcon: string
  key: string
  type: string
  group: string[]
  range: string[]
  auth: {
    role: string[]
    doc: string[]
    other: string[]
  }
  showLabel?: false
  options?: {
    label?: string
    key: string
    myIcon?: string
    type?: string
  }[]
}

const allOption = ref<OptionType[]>([
  {
    label: '新建文件夹',
    key: 'createDir',
    myIcon: 'wenjianjia2',
    type: 'btn',
    group: ['new-file'],
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_ADD],
      doc: [PERMISSIONS.DOC_EDIT],
      other: []
    }
  },
  {
    label: '新建文件',
    key: 'new-file',
    type: 'drop-btn',
    showLabel: false,
    myIcon: 'xinjianwenjian',
    group: ['new-file'],
    options: newFileActions,
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_ADD],
      doc: [PERMISSIONS.DOC_EDIT],
      other: []
    }
  },
  {
    label: '上传',
    key: 'upload',
    myIcon: 'xiazaijiantou-copy',
    type: 'btn',
    group: ['upload-file'],
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_UPLOAD],
      doc: [PERMISSIONS.DOC_UPLOAD],
      other: []
    }
  },
  {
    label: '多文件上传',
    key: 'upload-more',
    myIcon: 'xiazaijiantou-copy',
    type: 'drop-btn',
    showLabel: false,
    group: ['upload-file'],
    options: uploadActions,
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_UPLOAD],
      doc: [PERMISSIONS.DOC_UPLOAD],
      other: []
    }
  },
  {
    label: '粘贴',
    key: 'paste',
    myIcon: 'niantie1',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_MOVE],
      doc: [PERMISSIONS.DOC_DOWNLOAD_COPY],
      other: ['cut-exist']
    }
  },
  {
    label: '上层文件夹显示',
    key: 'parent-folder-show',
    type: 'btn',
    myIcon: 'wenjianjia2',
    group: ['file-action'],
    range: [
      navTypeList.USER_SHARE,
      navTypeList.USER_SHARE_LINK,
      navTypeList.FILE_TYPE
    ],
    auth: {
      role: [],
      doc: [],
      other: ['len-1']
    }
  },
  {
    label: '内部协作',
    key: 'shareTo',
    myIcon: 'fenxiang-copy',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_SHARE],
      doc: [PERMISSIONS.DOC_SHARE],
      other: ['len-1']
    }
  },
  {
    label: '外链分享',
    key: 'link',
    myIcon: 'zhuanfa2-copy',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.SOURCE],
    auth: {
      role: [PERMISSIONS.SOURCE_SHARELINK],
      doc: [PERMISSIONS.DOC_SHARE],
      other: ['len-1']
    }
  },
  {
    label: '下载',
    key: 'download',
    myIcon: 'xiazaijiantou',
    type: 'btn',
    group: ['file-action'],
    range: [
      navTypeList.SOURCE,
      navTypeList.FILE_TYPE,
      navTypeList.LINK_SHARE_DESC
    ],
    auth: {
      role: [PERMISSIONS.SOURCE_DOWNLOAD],
      doc: [PERMISSIONS.DOC_DOWNLOAD_COPY],
      other: ['len-more']
    }
  },
  {
    label: '复制',
    key: 'copy',
    myIcon: 'fuzhi1',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.SOURCE, navTypeList.FILE_TYPE],
    auth: {
      role: [PERMISSIONS.SOURCE_MOVE],
      doc: [PERMISSIONS.DOC_DOWNLOAD_COPY],
      other: ['len-more']
    }
  },
  {
    label: '剪切',
    key: 'cut',
    type: 'btn',
    myIcon: 'jianqie',
    group: ['file-action'],
    range: [navTypeList.SOURCE, navTypeList.FILE_TYPE],
    auth: {
      role: [PERMISSIONS.SOURCE_MOVE],
      doc: [PERMISSIONS.DOC_REMOVE],
      other: ['len-more']
    }
  },
  {
    label: '重命名',
    key: 'rename',
    type: 'btn',
    myIcon: 'zhongmingming',
    group: ['file-action'],
    range: [navTypeList.SOURCE, navTypeList.FILE_TYPE],
    auth: {
      role: [PERMISSIONS.SOURCE_EDIT],
      doc: [PERMISSIONS.DOC_EDIT],
      other: ['len-1']
    }
  },
  {
    label: '删除',
    key: 'bin',
    type: 'btn',
    myIcon: 'chacha1',
    group: ['file-action'],
    range: [navTypeList.SOURCE, navTypeList.FILE_TYPE],
    auth: {
      role: [PERMISSIONS.SOURCE_REMOVE],
      doc: [PERMISSIONS.DOC_REMOVE],
      other: ['len-more']
    }
  },
  {
    label: '编辑协作分享',
    key: 'share-to-edit',
    myIcon: 'fenxiang-copy',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.USER_SHARE],
    auth: {
      role: [PERMISSIONS.SOURCE_SHARE],
      doc: [PERMISSIONS.DOC_SHARE],
      other: ['len-1']
    }
  },
  {
    label: '取消协作分享',
    key: 'share-to-close',
    myIcon: 'chacha1',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.USER_SHARE],
    auth: {
      role: [PERMISSIONS.SOURCE_SHARE],
      doc: [PERMISSIONS.DOC_SHARE],
      other: ['len-more']
    }
  },
  {
    label: '编辑外链分享',
    key: 'share-link-edit',
    myIcon: 'zhuanfa2-copy',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.USER_SHARE_LINK],
    auth: {
      role: [PERMISSIONS.SOURCE_SHARELINK],
      doc: [PERMISSIONS.DOC_SHARE],
      other: ['len-1']
    }
  },
  {
    label: '取消外链分享',
    key: 'share-link-close',
    myIcon: 'chacha1',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.USER_SHARE_LINK],
    auth: {
      role: [PERMISSIONS.SOURCE_SHARELINK],
      doc: [PERMISSIONS.DOC_SHARE],
      other: ['len-more']
    }
  },

  {
    label: '清空回收站',
    myIcon: 'chacha1',
    key: 'empty-bin',
    type: 'btn',
    group: ['bin-file'],
    range: [navTypeList.USER_RECYCLE],
    auth: {
      role: [PERMISSIONS.SOURCE_REMOVE],
      doc: [PERMISSIONS.DOC_REMOVE],
      other: []
    }
  },
  {
    label: '全部还原',
    key: 'all-recycle-bin',
    myIcon: 'huanyuan',
    type: 'btn',
    group: ['bin-file'],
    range: [navTypeList.USER_RECYCLE],
    auth: {
      role: [PERMISSIONS.SOURCE_REMOVE],
      doc: [PERMISSIONS.DOC_REMOVE],
      other: []
    }
  },
  {
    label: '还原',
    key: 'recycle',
    myIcon: 'huanyuan',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.USER_RECYCLE],
    auth: {
      role: [PERMISSIONS.SOURCE_REMOVE],
      doc: [PERMISSIONS.DOC_REMOVE],
      other: ['len-more']
    }
  },
  {
    label: '彻底删除',
    key: 'del-complete',
    myIcon: 'chacha1',
    type: 'btn',
    group: ['file-action'],
    range: [navTypeList.USER_RECYCLE],
    auth: {
      role: [PERMISSIONS.SOURCE_REMOVE],
      doc: [PERMISSIONS.DOC_REMOVE],
      other: ['len-more']
    }
  },
  {
    label: '属性',
    key: 'desc',
    myIcon: 'jinggao',
    type: 'btn',
    group: ['file-action'],
    range: [
      navTypeList.SOURCE,
      navTypeList.FILE_TYPE,
      navTypeList.USER_RECYCLE,
      navTypeList.SHARE_TO_ME,
      navTypeList.USER_SHARE,
      navTypeList.USER_SHARE_LINK,
      navTypeList.LINK_SHARE_DESC
    ],
    auth: {
      role: [PERMISSIONS.SOURCE_VIEW],
      doc: [PERMISSIONS.DOC_VIEW],
      other: ['len-1']
    }
  }
])

const finaOption = computed(() => {
  let baseOption: OptionType[] = []

  // 进行权限和页面选中项的过滤
  if (userStore.userInfo && (props.curNav || explorerStore.curNav)) {
    baseOption = allOption.value.filter((item) => {
      let res = true
      if (item.auth) {
        if (item.auth.role && item.auth.role.length) {
          // 检查系统权限
          res =
            userStore.userInfo?.role.Permissions.some((v) => {
              return item.auth.role?.includes(v.ename)
            }) || false
          // console.log(res, item)

          if (!res) {
            return res
          }
        }
        if (item.auth.doc && item.auth.doc.length) {
          // 检查角色权限
          res = props.sourceAuths.some((v) => {
            return item.auth.doc.includes(v)
          })

          if (!res) {
            return res
          }
        }
        if (item.auth.other && item.auth.other.length) {
          // 检查其他
          if (item.auth.other.includes('len-1')) {
            // 需要checkrowkey为1
            res = props.checkRowLength === 1
            if (!res) {
              return res
            }
          }

          // 检查更多的情况
          if (item.auth.other.includes('len-more')) {
            // 需要checkrowkey为1
            res = props.checkRowLength >= 1
            if (!res) {
              return res
            }
          }

          // 检查需要剪切板
          if (item.auth.other.includes('cut-exist')) {
            res = explorerStore.cutSourceList.length > 0
            if (!res) {
              return res
            }
          }
        }
      }
      if (item.range) {
        const finalNav = props.curNav || explorerStore.curNav
        res = item.range.includes(finalNav!.myType)
      }
      return res
    })
  } else {
    return []
  }

  // 获取所有group分组，去重
  let groups = new Set<string>()
  baseOption.forEach((item) => {
    item.group.forEach((item2) => {
      groups.add(item2)
    })
  })

  let groups2 = Array.from(groups)

  // 按不同的分组组合,过滤掉分组中项目数量为0的
  // [{btns:[{label,key,type}]}]
  const btnGroup = groups2
    .map((item) => {
      let btns = baseOption.filter((item2) => item2.group.includes(item))
      return {
        group: item,
        btns
      }
    })
    .filter((v) => v.btns.length > 0)

  return btnGroup
})

const handleBtnClick = (key: string) => {
  emits('key-select', key, undefined)
}
</script>

<style scoped lang="scss"></style>
